import { Component } from "react";
import PropTypes from "prop-types";
import Votemain from "./Votemain";
import Votefooter from "./Votefooter";
import ThemeContext from "./context";

export default class Vote extends Component{
    static propTypes={//校验title格式
        title:PropTypes.string.isRequired
    }
    static defaultProps={
        title:"vue好学吗？"
    }
    state={
        supNum:6,
        oppNum:3
    }
    add=(type)=>{//this--->Vote类
        if(type=="sup"){
            this.setState({
                supNum:this.state.supNum+1
            })
        }else if(type=="opp"){
            this.setState({
                oppNum:this.state.oppNum+1
            })
        }
    }
    render(){
        let {title}=this.props;
        let {supNum,oppNum}=this.state;

        let obj={
            supNum,
            oppNum,
            add:this.add
        }
        //供应商Provider
        //祖先元素--》ThemeContext.Provider 数据提供者 value参数是对象
        return <ThemeContext.Provider value={obj}>
            <div>
                <h1>{title}---总人数：{supNum+oppNum}</h1>
                <Votemain></Votemain>
                <Votefooter></Votefooter>
            </div>
        </ThemeContext.Provider>
    }
}